<template>
  <div class="home">
    <p>
      <i class="el-icon-s-promotion"></i>
      房产列表
    </p>
    <el-card class="page-wrap">
      <el-row class="main">
        <div v-for="item in list" :key="item.id" class="content">
          <div class="picture">
            <img :src="item.image" alt="" />
          </div>
          <div class="info">
            <h3 @click="info(item.id)">{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </el-row>
      <el-row>
        <!-- 分页器 -->
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getDetail } from "@/api/realtor.js";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const id = this.$route.query.id;
      const res = await getDetail(id);
      this.list = res.properties;
      this.total = this.list.length
      console.log(this.list);
    },
    info(id) {
      this.$router.push({ path: "realtorDetail", query: { id: id } });
      console.log(id);
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 60%;
  margin: 20px auto;
  p {
    color: #fba320;
    i {
      font-size: 24px;
    }
  }
  .page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    p {
      color: #000;
    }
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 20px;
      border-bottom: 1px solid rgb(214, 212, 212);
      .picture {
        width: 300px;
        img {
          width: 100%;
        }
      }
      .info {
        flex: 1;
        margin-left: 40px;
        h3 {
          margin-bottom: 20px;
          cursor: pointer;
        }
      }
    }
  }
}
::v-deep .el-card__body {
  padding: 10px;
}
</style>
